
<style lang="less">
.cardBox {
  display: flex;
  flex-wrap: wrap;
  .count-style {
    font-size: 38px;
  }
}
.todaynum {
  font-size: 30px;
  color: rgb(45, 140, 240);
}
.today-yestaday {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  border-bottom: solid 1px #eee;
  padding: 15px 0;
  margin-left: 15px;
  .today-y {
    width: 5%;
  }
}
.today-yback {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.today-ytitle {
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  div {
    width: 25%;
    text-align: center;
  }
}
.comparison-title {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  span {
    &:first-child {
      font-weight: bold;
    }
  }
  .update-time {
    font-size: 14px;
  }
}
.comparison-box {
  margin-bottom: 15px;
}
.date-search {
  text-align: center;
  margin: 20px auto;
}
</style>

<template>
  <div>
    <!-- <Button @click="aaa" :disabled='mark'>店家</Button> -->
    <div class="cardBox">
      <div
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height:95px;min-width:200px;padding-bottom: 10px;margin-right:15px;"
      >
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <!-- <count-to :end="infor.count" count-class="count-style" /> -->
          <div style="font-size:38px" :title="infor.store_account">{{infor.count}}</div>
          <p>{{ infor.title }}</p>
        </infor-card>
      </div>
      <!-- <div style="height:95px;min-width:200px;padding-bottom: 10px;margin-right:15px;">
        <infor-card shadow color="#aa5554" icon="logo-buffer" :icon-size="36">
          <div
            style="font-size:38px"
            :title="all_account.store_account"
          >{{all_account.store_account}}</div>
          <p>商户待提现金额</p>
        </infor-card>
      </div>
      <div style="height:95px;min-width:200px;padding-bottom: 10px;margin-right:15px;">
        <infor-card shadow color="#adbe6b" icon="ios-calendar" :icon-size="36">
          <div
            style="font-size:38px"
            :title="all_account.member_account"
          >{{all_account.member_account}}</div>
          <p>会员待提现金额</p>
        </infor-card>
      </div>-->
    </div>
    <!--  今天和昨天的收入对比 -->

    <Row :gutter="20" style="margin-top: 10px;">
      <Col span="12" style="margin-bottom: 20px;">
        <Card shadow v-if="pieData.length !== 0">
          <chart-pie style="minHeight: 300px;" :value="pieData" text="订单统计" name="订单统计"></chart-pie>
        </Card>
      </Col>
      <Col span="12" style="margin-bottom: 20px;">
        <Card shadow v-if="viptotal.length !== 0">
          <chart-pie style="minHeight: 300px;" :value="viptotal" text="分站新增会员占比" name="新增占比"></chart-pie>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <Card v-if="showtotal1" style="margin-right:5px;">
          <example
            v-for="(item, index) in total1"
            :key="index"
            style="height: 310px;"
            :option="item"
          />
        </Card>
      </Col>
      <Col span="12">
        <Card v-if="showtotal" style="margin-left:5px;">
          <example
            v-for="(item, index) in total"
            :key="index"
            style="height: 310px;"
            :option="item"
          />
        </Card>
      </Col>
      
    </Row>
    <Row style="margin-top:15px">
      <Col span="12">
        <Card v-if="isEnd" style="margin-right:5px;">
          <div class="date-search">
            <DatePicker
              @on-change="changeDateDay"
              type="month"
              placeholder="请选择年月"
              style="width: 200px"
            ></DatePicker>
          </div>
          <example
            v-for="(item, index) in options"
            :key="index"
            style="height: 310px;"
            :option="item"
          />
        </Card>
      </Col>
      <Col span="12">
        <Card v-if="mIsEnded" style="margin-left:5px;">
          <div class="date-search">
            <DatePicker
              type="year"
              @on-change="changeDateMonth"
              placeholder="请选择年"
              style="width: 200px"
            ></DatePicker>
          </div>
          <example
            v-for="(item, index) in options1"
            :key="index"
            style="height: 310px;"
            :option="item"
          />
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import { options } from "./options.js";
import { options1 } from "./options1.js";
import { total } from "./total.js";
import { total1 } from "./total1.js";
import { total3 } from "./total3.js";
import { total4 } from "./total4.js";
import CountTo from "_c/count-to";
import { getData } from "@/api/data";
import Example from "./example.vue";
import { ChartPie, ChartBar } from "_c/charts";
import { setDate } from "@/libs/tools";
export default {
  name: "datastatistics",
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data() {
    return {
      mark: true,
      time: "",
      showtotal: false,
      showtotal1: false,
      showtotal4: false,
      showtotal3: false,
      isEnd: false,
      mIsEnded: false,
      allArr: {
        backamount: [],
        backamountgains: [],
        bookin: [],
        buytimes: [],
        canceltimes: [],
        devoteprofit: [],
        drawings: [],
        members: [],
        newuser: [],
        outimes: [],
        paytimes: [],
        revenue: [],
        revenue2: [],
        saleamount: [],
        salegoods: [],
        servicepacka: [],
        servicepackb: [],
        settleservicepack: [],
        showdate: [],
        storedrawings: [],
        timeoutserciepack: [],
        unsaleamount: [],
        unsalegoods: [],
        userpay: [],
        memberrevnue2: [],
        vipmembers: [],
        allgmv:[],
        exploamount:[],
        careamount:[]
      },
      allArr1: {
        backamount: [],
        backamountgains: [],
        bookin: [],
        buytimes: [],
        canceltimes: [],
        devoteprofit: [],
        drawings: [],
        members: [],
        newuser: [],
        outimes: [],
        paytimes: [],
        revenue: [],
        revenue2: [],
        saleamount: [],
        salegoods: [],
        servicepacka: [],
        servicepackb: [],
        settleservicepack: [],
        showdate: [],
        storedrawings: [],
        timeoutserciepack: [],
        unsaleamount: [],
        unsalegoods: [],
        userpay: [],
        memberrevnue2: [],
        vipmembers: [],
        allgmv:[],
        exploamount:[],
        careamount:[],
      },
      options: options,
      options1: options1,
      total: total,
      total1: total1,
      total3: total3,
      total4: total4,
      inforCardData: [
        {
          title: "总用户数",
          icon: "md-person-add",
          count: 0,
          color: "#2d8cf0"
        },
        { title: "达人总数", icon: "md-locate", count: 0, color: "#19be6b" },
        {
          title: "初级达人总数",
          icon: "md-help-circle",
          count: 0,
          color: "#ff9900"
        },
        { title: "高级达人总数", icon: "md-share", count: 0, color: "#ed3f14" },
        {
          title: "金牌达人总数",
          icon: "md-chatbubbles",
          count: 0,
          color: "#E46CBB"
        },
        {
          title: "全站GMV",
          icon: "md-appstore",
          count: 0,
          color: "#411fa5"
        },
        {
          title: "爆品GMV",
          icon: "md-apps",
          count: 0,
          color: "#1fa59a"
        },
        {
          title: "严选GMV",
          icon: "ios-aperture",
          count: 0,
          color: "#e85628"
        },
        {
          title: "系统总收益",
          icon: "ios-archive",
          count: 0,
          color: "#e828d8"
        },
        {
          title: "分站总收益",
          icon: "ios-barcode",
          count: 0,
          color: "#b6b916"
        },
        {
          title: "达人总收益",
          icon: "ios-basketball",
          count: 0,
          color: "#16a1b9"
        },
        {
          title: "达人待提现金额",
          icon: "ios-beaker",
          count: 0,
          color: "#098883"
        },
        {
          title: "客单价",
          icon: "logo-bitcoin",
          count: 0,
          color: "#6a0988"
        },
        {
          title: "付费用户转化率",
          icon: "ios-book",
          count: 0,
          color: "#883909"
        },
        {
          title: "复购率",
          icon: "md-bowtie",
          count: 0,
          color: "#092f88"
        }
      ],
      pieData: [],
      consume: [],
      viptotal: [],
      barData: {},
      all_account: {
        member_account: 0,
        store_account: 0
      }
    };
  },
  methods: {
    changeDateMonth(val) {
      this.getStatsMonth(val);
    },
    changeDateDay(val) {
      this.getStats(val);
    },
    getStats(date) {
      getData(`/stats.show/getStats`, { date: date }).then(res => {
        if (res.data.code == 0) {
          for (let i in this.allArr) {
            this.allArr[i]=[];
          }
          let item = res.data.data;
          for (let h = 0; h < item.length; h++) {
            for (let key in item[h]) {
              if (!this.allArr[key]) {
                this.allArr[key] = [];
              } else {
                this.allArr[key].push(item[h][key]);
              }
            }
          }
          for (let i = 0; i < this.options.length; i++) {
            this.options[i].xAxis[0].data = this.allArr.showdate;
          }
          //给折线图和柱状图添加数据
          this.options[0].series[0].data = this.allArr.allgmv;
          this.options[0].series[1].data = this.allArr.exploamount;
          this.options[0].series[2].data = this.allArr.careamount;
          // 表1数据复制
          this.options[1].series[0].data = this.allArr.buytimes;
          this.options[1].series[1].data = this.allArr.paytimes;
          this.options[1].series[2].data = this.allArr.outimes;
          this.options[1].series[3].data = this.allArr.canceltimes;
          // 表2数据赋值
          this.options[2].series[0].data = this.allArr.salegoods;
          this.options[2].series[1].data = this.allArr.unsalegoods;
          // 表3数据赋值

          // 表4数据复制
          this.options[3].series[0].data = this.allArr.revenue;
          this.options[3].series[1].data = this.allArr.revenue2;
          this.options[3].series[2].data = this.allArr.memberrevnue2;
          this.options[3].series[3].data = this.allArr.drawings;
          this.options[3].series[4].data = this.allArr.storedrawings;
          // this.options[3].series[5].data = this.allArr.devoteprofit;
          // 表5数据赋值
          this.options[4].series[0].data = this.allArr.members;
          this.options[4].series[1].data = this.allArr.vipmembers;
          this.options[4].series[2].data = this.allArr.newuser;
          this.isEnd = true;
        }
      });
    },
    getStatsMonth(date) {
      // 获取按月统计的
      getData(`/stats.show/getStatsMonth`, { date: date }).then(res => {
        //  组装月的数据
        if (res.data.code === 0) {
          let item = res.data.data;
          for (let i in this.allArr1) {
            this.allArr1[i]=[];
          }
          for (let h = 0; h < item.length; h++) {
            for (let key in item[h]) {
              if (!this.allArr1[key]) {
                this.allArr1[key] = [];
              } else {
                this.allArr1[key].push(item[h][key]);
              }
            }
          }
          for (let i = 0; i < this.options1.length; i++) {
            this.options1[i].xAxis[0].data = this.allArr1.showdate;
          }
          // 表3数据赋值
          this.options1[0].series[0].data = this.allArr1.allgmv;
          this.options1[0].series[1].data = this.allArr1.exploamount;
          this.options1[0].series[2].data = this.allArr1.careamount;

          this.options1[1].series[0].data = this.allArr1.buytimes;
          this.options1[1].series[1].data = this.allArr1.paytimes;
          this.options1[1].series[2].data = this.allArr1.outimes;
          this.options1[1].series[3].data = this.allArr1.canceltimes;
          // 表2数据赋值
          this.options1[2].series[0].data = this.allArr1.salegoods;
          this.options1[2].series[1].data = this.allArr1.unsalegoods;

          // 表4数据复制
          this.options1[3].series[0].data = this.allArr1.revenue;
          this.options1[3].series[1].data = this.allArr1.revenue2;
          this.options1[3].series[2].data = this.allArr1.memberrevnue2;
          this.options1[3].series[3].data = this.allArr1.drawings;
          this.options1[3].series[4].data = this.allArr1.storedrawings;
          // this.options1[3].series[5].data = this.allArr1.devoteprofit;
          // 表5数据赋值
          this.options1[4].series[0].data = this.allArr1.members;
          this.options1[4].series[1].data = this.allArr1.vipmembers;
          this.options1[4].series[2].data = this.allArr1.newuser;
          this.mIsEnded = true;
        }
      });
    }
  },
  mounted() {
    let timestamp = new Date().getTime();
    let date = setDate(timestamp, "YYYY");
    let timestamp1 = new Date().getDate();
    let date1 = setDate(timestamp, "YYYY-MM");
    this.getStatsMonth(date);
    this.getStats(date1);
    getData(`/stats.show/getStatsStatic`).then(res => {
      if (res.data.code === 0) {
        const data = res.data.data;
        this.inforCardData.forEach(item => {
          switch (item.title) {
            case "总用户数":
              item.count = data.members || 0;
              break;
            case "达人总数":
              item.count = data.dr1 || 0;
              break;
            case "初级达人总数":
              item.count = data.dr2 || 0;
              break;
            case "高级达人总数":
              item.count = data.dr3 || 0;
              break;
            case "金牌达人总数":
              item.count = data.dr4 || 0;
              break;
            case "全站GMV":
              item.count = data.allgmv || 0;
              break;
            case "爆品GMV":
              item.count = data.exploamount || 0;
              break;
            case "严选GMV":
              item.count = data.careamount || 0;
              break;
            case "系统总收益":
              item.count = data.revenue || 0;
              break;
            case "分站总收益":
              item.count = data.revenue2 || 0;
              break;
            case "达人总收益":
              item.count = data.dramount || 0;
              break;
            case "达人待提现金额":
              item.count = data.draw || 0;
              break;
            case "客单价":
              item.count = data.userstat.pay_3 || 0;
              break;
            case "付费用户转化率":
              item.count = (data.userstat.pay*100).toFixed(2)+'%' || 0;
              break;
            case "复购率":
              item.count = (data.userstat.pay_2*100).toFixed(2)+'%' || 0;
              break;
          }
          return item
        });
        const arr = [];
        this.pieData = [
          { value: data.paytimes - data.canceltimes, name: "付款订单" },
          { value: data.canceltimes, name: "取消订单" },
          { value: data.outimes, name: "过期订单" }
        ];
      }
    });
    // 获取按城市统计的饼状图数据
    getData(`/stats.show/getStatsSites`).then(res => {
      const data = res.data.data;
      // console.log(res.data)
      let viptotal = data ? data.viptotal : "";
      let consume = res.data.data.consume;
      let consume_yesterday = res.data.data.consume_yesterday;
      let other_stats = res.data.data.other_stats;
      let time = res.data.data.stats_time;
      this.all_account = res.data.data.all_account;
      let CityList = [];
      let cityValue = [];
      let yesterdayCityList = [];
      let yesterdaycityValue = [];

      consume.forEach(items => {
        if (items.total !== 0) {
          CityList.push(items.city);
          cityValue.push(items.total);
        }
      });
      consume_yesterday.forEach(item => {
        yesterdayCityList.push(item.city);
        yesterdaycityValue.push(item.total);
      });
      // 分站交易占比(总计)
      this.total1[0].xAxis[0].data = CityList;
      this.total1[0].series[0].data = cityValue;
      this.showtotal1 = true;
      // 分站交易占比(昨日)
      this.total[0].xAxis[0].data = yesterdayCityList;
      this.total[0].series[0].data = yesterdaycityValue;
      this.showtotal = true;
      viptotal.forEach(item => {
        if (item.total !== 0) {
          this.viptotal.push({ value: item.total, name: item.city });
        }
      });
    });
    //  getData(`/stats.show/getMemberUpmonth`,{type:1}).then(res => {
    //    // 会员费用收益
    //    let showdate = [];
    //   let amount = [];
    //   res.data.data.map(item=>{
    //     showdate.push(item.showdate);
    //     amount.push(item.amount);
    //   })
    //   this.total3[0].xAxis[0].data = showdate;
    //   this.total3[0].series[0].data = amount;
    //   this.showtotal3 = true;
    //  });
    //  getData(`/stats.show/getMemberUpmonth`,{type:2}).then(res => {
    //   // 合伙人费用收益
    //   let showdate = [];
    //   let amount = [];
    //   res.data.data.map(item=>{
    //     showdate.push(item.showdate);
    //     amount.push(item.amount);
    //   })
    //   this.total4[0].xAxis[0].data = showdate;
    //   this.total4[0].series[0].data = amount;
    //   this.showtotal4 = true;
    //  });
  }
};
</script>
